﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Unified theory | Parameterz.com</title>
    <link href="../style/jquery.cluetip.css" rel="stylesheet" type="text/css" />
    <link href="../style/screen.css" rel="stylesheet" type="text/css" />
    <link href="../style/prettify.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

    <script src="../js/ZUtils.js" type="text/javascript"></script>

    <script src="../js/jquery.cluetip.js" type="text/javascript"></script>

    <script src="js/unified.js" type="text/javascript"></script>

    <script src="../js/prettify.js" type="text/javascript"></script>

    <style type="text/css">
        p
        {
            font-size: 120%;
        }
        .normal, .mild, .moderate, .severe, .borderline
        {
            padding: .8em;
            margin-bottom: 1em;
            border: 2px solid #ddd;
        }
        .severe, .moderate
        {
            background: #FBE3E4;
            color: #8a1f11;
            border-color: #FBC2C4;
        }
        .mild, .borderline
        {
            background: #FFF6BF;
            color: #555;
            border-color: #FFD324;
        }
        .normal
        {
            background: #E6EFC2;
            color: #264409;
            border-color: #C6D880;
        }
        .title, .authors, .journal
        {
            display: block;
        }
        .label
        {
            text-align: right;
        }
        th
        {
            text-align: center;
        }
        pre
        {
            height: 400px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>
            Aortic Root Z-Score Calculator</h1>
        <h2>
            Comparing References</h2>
        <form id="aortic-root-form" action="" method="">
        <table class="zTable" summary="Z-Scores of Cardiac Structures">
            <tr>
                <td class="label">
                    <label for="txtHT">
                        Height (cm):</label>
                </td>
                <td>
                    <input id="txtHT" type="text" onchange="updateBSA()" title="cm" />
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label for="txtWT">
                        Weight (kg):</label>
                </td>
                <td>
                    <input id="txtWT" type="text" onchange="updateBSA()" title="kg" />
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label for="cmbBSA">
                        BSA formula:</label>
                </td>
                <td>
                    <select id="cmbBSA" onchange="updateBSA()">
                        <option value="Boyd">Boyd </option>
                        <option value="DuBois">DuBois </option>
                        <option value="Gehan">Gehan &amp; George </option>
                        <option value="Haycock" selected="selected">Haycock </option>
                        <option value="Mosteller">Mosteller </option>
                        <option value="Dreyer">Weight ONLY </option>
                    </select>
                </td>
                <td id="BSA" class="results">
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label>
                        Reference:</label>
                </td>
                <td>
                    <select id="cmbUseRef" onchange="updateRef()">
                        <option value="">-- Choose Reference --</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label for="cmbGender" class="gender">
                        Gender:</label>
                </td>
                <td>
                    <select id="cmbGender" class="gender" onchange="updateGender()">
                        <option value="f" selected="selected">Female</option>
                        <option value="m">Male</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td id="info" colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <th>
                    Site
                </th>
                <th>
                    Measured (cm)
                </th>
                <th>
                    Z-Score
                </th>
            </tr>
            <tr>
                <td class="label">
                    <label class="aov" for="txtaov">
                        Aortic Annulus:</label>
                </td>
                <td>
                    <input id="txtaov" type="text" class="site aov" onchange="updateSite('aov', this.value)"
                        title="" />
                </td>
                <td>
                    <span id="aovz" class="results aov"></span>
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label class="sov" for="txtsov">
                        Sinuses:</label>
                </td>
                <td>
                    <input id="txtsov" type="text" class="site sov" onchange="updateSite('sov', this.value)" />
                </td>
                <td>
                    <span id="sovz" class="results sov"></span>
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label class="stj" for="txtstj">
                        ST Junction:</label>
                </td>
                <td>
                    <input id="txtstj" type="text" class="site stj" onchange="updateSite('stj', this.value)" />
                </td>
                <td>
                    <span id="stjz" class="results stj"></span>
                </td>
            </tr>
            <tr>
                <td class="label">
                    <label class="aao" for="txtaao">
                        Ascending Aorta:</label>
                </td>
                <td>
                    <input id="txtaao" type="text" class="site aao" onchange="updateSite('aao', this.value)" />
                </td>
                <td>
                    <span id="aaoz" class="results aao"></span>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input id="btnCalculateZ" type="button" value="Update" onclick="calculateZScores()"
                        class="button" />
                </td>
                <td>
                    <input id="Reset1" type="reset" value="reset" onclick="resetForm()" />
                </td>
            </tr>
        </table>
        </form>
        <div class="span-18">
            <hr />
            <h3>
                References:</h3>
            <div id="References">
                <a class="linkUrl"><span class="title"></span></a><span class="authors"></span><span
                    class="journal"></span>
            </div>
        </div>
        <hr class="space" />
        <div id="about">
            <h4>
                Defining a JavaScript model for z-score calculations</h4>
            <p>
                About this... it's not perfect. In fact, it's a little embarrassing.</p>
            <p>
                This is my original effort:
            </p>
            <div id="code_sample1">
                <pre class="prettyprint">
Par = {
    id: "Paris",
    citation: {
        title: 'Nomograms for aortic root diameters in children using two-dimensional echocardiography.',
        authors: 'Gautier M, Detaint D, Fermanian C, Aegerter P, Delorme G, Arnoult F, Milleron O, Raoux F, Stheneur C, Boileau C, Vahanian A, Jondeau G.',
        journal: 'Am J Cardiol. 2010 Mar 15;105(6):888-94.',
        linkUrl: 'http://www.ncbi.nlm.nih.gov/pubmed/20211339'
    },
    requiresGender: true,
    aov: {
        logMean: function() {
            if (GENDER === 'm') {
                return fnLogLinear(2.78, 0.47);
            }
            if (GENDER === 'f') {
                return fnLogLinear(2.75, 0.44);
            }
        },
        mean: function() {
            return Math.exp(this.logMean()) / 10;
        },
        zscore: function(score) {
            if (GENDER === 'm') {
                return zScore(Math.log(score * 10), this.logMean(), 0.1);
            }
            if (GENDER === 'f') {
                return zScore(Math.log(score * 10), this.logMean(), 0.1);
            }
        }
    },
    sov: {
        logMean: function() {
            if (GENDER === 'm') {
                return fnLogLinear(3.1, 0.49);
            }
            if (GENDER === 'f') {
                return fnLogLinear(3.1, 0.44);
            }
        },
        mean: function() {
            return Math.exp(this.logMean()) / 10;
        },
        zscore: function(score) {
            if (GENDER === 'm') {
                return zScore(Math.log(score * 10), this.logMean(), 0.1);
            }
            if (GENDER === 'f') {
                return zScore(Math.log(score * 10), this.logMean(), 0.09);
            }
        }
    },
    stj: {
        logMean: function() {
            if (GENDER === 'm') {
                return fnLogLinear(2.9, 0.47);
            }
            if (GENDER === 'f') {
                return fnLogLinear(2.9, 0.42);
            }
        },
        mean: function() {
            return Math.exp(this.logMean()) / 10;
        },
        zscore: function(score) {
            if (GENDER === 'm') {
                return zScore(Math.log(score * 10), this.logMean(), 0.1);
            }
            if (GENDER === 'f') {
                return zScore(Math.log(score * 10), this.logMean(), 0.09);
            }
        }
    },
    aao: {
        logMean: function() {
            if (GENDER === 'm') {
                return fnLogLinear(2.9, 0.46);
            }
            if (GENDER === 'f') {
                return fnLogLinear(2.9, 0.46);
            }
        },
        mean: function() {
            return Math.exp(this.logMean()) / 10;
        },
        zscore: function(score) {
            if (GENDER === 'm') {
                return zScore(Math.log(score * 10), this.logMean(), 0.11);
            }
            if (GENDER === 'f') {
                return zScore(Math.log(score * 10), this.logMean(), 0.1);
            }
        }
    }

};        </pre>
            </div>
            <p>
                The above code works and is somewhat expressive, but I knew it just wasn't proper
                JavaScript style. This is my latest effort:
            </p>
            <div id="code_sample2">
                <pre class="prettyprint">
function LogLinear(o) {
    /*
    a basic constructor function;
    assumes GENDER, BSA are global variables;
    constructed with an object with male and female objects of this pattern:
    {male: {slope: xx, intercept: xx, mse: xx}, female: {...}}
    
    */
    this.male = o.male;
    this.female = o.female;

}
LogLinear.prototype.mean = function() {
    var o;
    if (GENDER === 'm') {
        o = this.male;
    } else {
        o = this.female;
    }
    return Math.exp((Math.log(BSA) * o.slope + o.intercept)) / 10;
}
LogLinear.prototype.zscore = function(score) {
    var o;
    if (GENDER === 'm') {
        o = this.male;
    } else {
        o = this.female;
    }
    return (Math.log(score * 10) - this.logMean()) / o.mse; //expects 'score' to arrive in cm
}
LogLinear.prototype.logMean = function() {
    var o;
    if (GENDER === 'm') {
        o = this.male;
    } else {
        o = this.female;
    }
    return Math.log(BSA) * o.slope + o.intercept;
}

//test:
Paris = {
    id: "Paris",
    citation: {
        title: 'Nomograms for aortic root diameters in children using two-dimensional echocardiography.',
        authors: 'Gautier M, Detaint D, Fermanian C, Aegerter P, Delorme G, Arnoult F, Milleron O, Raoux F, Stheneur C, Boileau C, Vahanian A, Jondeau G.',
        journal: 'Am J Cardiol. 2010 Mar 15;105(6):888-94.',
        linkUrl: 'http://www.ncbi.nlm.nih.gov/pubmed/20211339'
    },
    requiresGender: true,
    aov: new LogLinear({
        male: { intercept: 2.78, slope: 0.47, mse: 0.1 },
        female: { intercept: 2.75, slope: 0.44, mse: 0.1 }
    }),
    sov: new LogLinear({
        male: { intercept: 3.1, slope: 0.49, mse: 0.1 },
        female: { intercept: 3.1, slope: 0.44, mse: 0.09 }
    }),
    stj: new LogLinear({
        male: { intercept: 2.9, slope: 0.47, mse: 0.1 },
        female: { intercept: 2.9, slope: 0.42, mse: 0.09 }
    }),
    aao: new LogLinear({
        male: { intercept: 2.9, slope: 0.46, mse: 0.11 },
        female: { intercept: 2.9, slope: 0.46, mse: 0.1 }
    })
};

            </pre>
            </div>
            <p>I think the latest arrangement is much tighter, and I feel like I can also now include
            other properties like upperLimit(), lowerLimit(), etc. Before, I felt like it was too scrambled
            and spaghetti-coded..
            </p>
            <p>
            Also, since the basic scale of values is not dramatically different between each of the sites,
            it might not be too hard to also add properties for generating a plot (using the google chart API).
            I have a working chart example on the TAPSE calculator now running on parameterz (and in the svn).
            </p>
        </div>
    </div>
    <!--end container div -->

    <script type="text/javascript">
        $(document).ready(function() {
            //fill the 'use_ref' dropdown list
            $.each(REFS, function(key, value) {
                $('#cmbUseRef').append($('<option></option>').
            attr('value', key).
            text(value.id));
            });
            $('#aortic-root-form').submit(function() { return false; });
            //prettyfy the code samples
            prettyPrint();
        });

    </script>

</body>
</html>
